<template>
  <div class="role-config">
    <el-dialog
      :show-close="false"
      :title="dialogTitle"
      width="850px"
      :visible="dialogVisible"
      append-to-body
    >
      <el-form label-width="100px">
        <el-form-item label="组件上架时间">
          <el-date-picker
            v-model="startEnd"
            style="width: 340px"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="规则逻辑说明">
          <el-input
            v-model="ruleDescription"
            style="width: 340px"
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="规则组关系">
          <el-switch
            v-model="relation"
            active-text="且"
            inactive-text="或"
          />
        </el-form-item>
      </el-form>

      <el-button
        size="mini"
        type="primary"
        @click="addGroup"
      >
        添加规则组
      </el-button>
      <el-table
        row-class-name="tableRowClassName"
        :default-expand-all="true"
        :data="ruleList"
        style="width: 100%"
      >
        <el-table-column type="expand">
          <template slot-scope="parentProps">
            <el-table
              :data="parentProps.row.ruleDetailList"
              border
              style="width: 100%"
            >
              <el-table-column
                type="index"
                label="序号"
                width="50"
              />
              <el-table-column prop="date" label="左条件" width="220">
                <template slot-scope="props">
                  <el-row :gutter="10">
                    <el-col :span="13">
                      <el-select
                        v-model="props.row.prefixCondition"
                        placeholder="请选择"
                        @change="prefixConditionChange(props.row)"
                      >
                        <el-option
                          v-for="item in configData.condition"
                          :key="item.preType"
                          :label="item.preName"
                          :value="item.preType"
                        />
                      </el-select>
                    </el-col>
                    <el-col :span="11">
                      <el-select
                        v-model="props.row.prefixConditionValue"
                        placeholder="请选择"
                        @change="prefixConditionValueChange(props.row)"
                      >
                        <el-option
                          v-for="item in prefixConditionOptions(props.row)"
                          :key="item.ruleType"
                          :label="item.ruleName"
                          :value="item.ruleType"
                        />
                      </el-select>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="操作符" width="100">
                <template slot-scope="props">
                  <el-select v-model="props.row.operation" placeholder="请选择">
                    <el-option
                      v-for="item in operationOptions(props.row)"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="右条件">
                <template slot-scope="props">
                  <el-row :gutter="10">
                    <el-col :span="8">
                      <el-select
                        v-model="props.row.suffixCondition"
                        disabled
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in rightCondition(props.row)"
                          :key="item.value"
                          :label="item.name"
                          :value="item.value"
                        />
                      </el-select>
                    </el-col>
                    <el-col :span="16">
                      <div class="rightFilter">
                        <el-select
                          v-if="rightSelectShow(props.row)"
                          v-model="props.row.suffixConditionValue"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="item in rightValueOptions(props.row)"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value"
                          />
                        </el-select>
                       
                        <el-input
                          v-if="rightInputShow(props.row)"
                          v-model="props.row.suffixConditionValue"
                          placeholder="请输入内容"
                          @change="inputChange(props.row)"
                        />
                        <i
                          v-if="rightCheckIconShow(props.row)"
                          style="font-size: 20px"
                          class="el-icon-refresh"
                          @click="checkCode(props.row)"
                        ></i>
                       
                        <div>
                          <div v-if="rightSelectShowMultiple(props.row)">
                            <el-select 
                              v-model="props.row.suffixConditionValue"
                              multiple
                              collapse-tags
                              placeholder="请选择"
                            >
                              <el-option
                                v-for="item in rightValueOptions(props.row)"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value"
                              />
                            </el-select>
                          </div>
                          <div v-if="rightRangeShow(props.row)" :style="{marginTop:rightSelectShowMultiple(props.row)?'5px':'0px'}">
                            <el-input 
                              v-model="props.row.startValue"
                              style="width:75px"
                              placeholder="开始"
                              @change="inputChange(props.row)"
                            />
                            到
                            <el-input 
                              v-model="props.row.endValue"
                              style="width:75px"
                              placeholder="结束"
                              @change="inputChange(props.row)"
                            />
                          </div>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column label="删除" width="60" align="center">
                <template slot-scope="props">
                  <i
                    class="el-icon-circle-close icon-add"
                    @click="
                      removeItem(parentProps.$index, props.$index, props.row)
                    "
                  ></i>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="序号" width="50">
          <template
            slot-scope="parentProps"
          >
            第{{ parentProps.$index + 1 }}组
          </template>
        </el-table-column>
        <el-table-column label="关系">
          <template slot-scope="parentProps">
            <el-switch
              v-model="parentProps.row.ruleRelation"
              active-text="且"
              inactive-text="或"
            />
          </template>
        </el-table-column>
        <el-table-column label="删除" width="60" align="center">
          <template slot-scope="parentProps">
            <i
              title="删除组"
              class="el-icon-delete icon-add"
              @click="deleteGroup(parentProps.$index, parentProps.row)"
            ></i>
          </template>
        </el-table-column>
        <el-table-column label="添加" width="60" align="center">
          <template slot-scope="parentProps">
            <i
              class="el-icon-circle-plus icon-add"
              @click="addItem(parentProps.row)"
            ></i>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="ok">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ruleOptions  from '@/util/biz/ruleConfig'
import ruleMix from './ruleMix'
export default {
  components: {},
  mixins:[ruleMix],
  props: {
    activityCode: {
      type: String,
      default:''
    },
    rules: {
      type: Object,
      required: true
    },
    componentId: {
      type: String,
      required: true
    },
    ruleType: {
      type: String,
      required: false,
      default:''
    },
    elementCode: {
      type: String,
      required: false,
      default:''
    },
    moduleCode: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      dialogVisible: false,
      relation: true,
      startEnd: [],
      ruleDescription: '',
      ruleList: [],
      configData: {},
      tableData: [],
      searchResult: {}
    }
  },
  computed: {
    ...mapGetters('step', ['steps', 'stepsl']),
    ...mapGetters('main', ['selectedComponent', 'pageContent']),
    componentModel () {
      if (this.componentId.indexOf('rule-') >= 0) {
        return { _id: 'rule-' + this.activityCode, name: '规则按钮' }
      }
      let model = this.pageContent.componentList.find(
        a => a._id === this.componentId
      )
      return { ...model }
    },
    comModuleCode() {
      return this.moduleCode || this.componentModel._id
    },
    dialogTitle() {
      if (this.componentModel.name) {
        return '人群规则设置（' + this.componentModel.name + '）'
      } else {
        return '人群规则设置'
      }
    }
      
  },
  watch: {
  },
  mounted () {
    this.configData=ruleOptions
  }
}
</script>

<style lang="less" scope>
.rightFilter {
  display: flex;
  align-items: center;

  i {
    cursor: pointer;
    margin-left: 3px;
  }
}
.role-config {
  .el-table .tableRowClassName {
    background-color: #eee;
  }
  .icon-add {
    cursor: pointer;
    font-size: 22px;
  }
}
</style>